<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发表调查问卷</title>

    <link rel="stylesheet" href="/statics/css/bootstrap.min.css">
    <link rel="stylesheet" href="/statics/css/users.css">
    <link rel="stylesheet" href="../layui/css/layui.css">
    <!-- 网页icon头像 -->
    <link rel="shortcut icon" href="/statics/img/tianqi.png">

</head>

<body>
    <div id="container">

        <div class="row">
            <!-- 左布局 -->
            <div class="col">

            </div>
            <!-- 中间布局 -->
            <div class="col">

                <form class="layui-form" id="QuestionForm" action="/home/publishQSJudge" method="POST">

                    <table class="layui-table" lay-skin="line">
                        <!-- 问卷名 -->
                        <tr>
                            <td>
                                <h4><strong>调查问卷问卷主题：</strong></h4>
                                <input type="text" id="QSTheme" name="title" required lay-verify="required"
                                    placeholder="请输入调查问卷问卷主题" autocomplete="off" class="layui-input">
                            </td>
                        </tr>
                        <!-- 问卷简介 -->
                        <tr>
                            <td>
                                <h4><strong>调查问卷问卷简介：</strong></h4>
                                <input type="text" id="qsSynopsis" name="title" required lay-verify="required"
                                    placeholder="请输入调查问卷问卷简介" autocomplete="off" class="layui-input">
                            </td>
                        </tr>
                        <!-- 第一题 -->
                        <tr>
                            <td>
                                <h4><strong>第一题：</strong></h4>
                                <input type="text" id="Question1" name="title" required lay-verify="required"
                                    placeholder="请输入第一题" autocomplete="off" class="layui-input">
                            </td>
                        <tr>
                            <td>
                                <label for="">填写范围：</label>
                                <input type="text" id="Question1Box" name="title" required lay-verify="required"
                                    placeholder="请输入分数1~10" title="这只是个样式啦，点不了的" autocomplete="off"
                                    class="layui-input layui-disabled">
                            </td>
                        </tr>
                        </tr>
                        <!-- 第二题 -->
                        <tr>
                            <td>
                                <h4><strong>第二题：</strong></h4>
                                <input type="text" id="Question2" name="title" required lay-verify="required"
                                    placeholder="请输入第二题" autocomplete="off" class="layui-input">
                            </td>
                        <tr>
                            <td>
                                <label for="">填写范围：</label>
                                <input type="text" id="Question2Box" name="title" required lay-verify="required"
                                    placeholder="请输入分数1~10" title="这只是个样式啦，点不了的" autocomplete="off"
                                    class="layui-input layui-disabled">
                            </td>
                        </tr>
                        </tr>
                        <!-- 第三题 -->
                        <tr>
                            <td>
                                <h4><strong>第三题：</strong></h4>
                                <input type="text" id="Question3" name="title" required lay-verify="required"
                                    placeholder="请输入第三题" autocomplete="off" class="layui-input">
                            </td>
                        <tr>
                            <td>
                                <label for="">填写范围：</label>
                                <input type="text" id="Question3Box" name="title" required lay-verify="required"
                                    placeholder="请输入分数1~10" title="这只是个样式啦，点不了的" autocomplete="off"
                                    class="layui-input layui-disabled">
                            </td>
                        </tr>
                        </tr>
                        <!-- 第四题 -->
                        <tr>
                            <td>
                                <h4><strong>第四题：</strong></h4>
                                <input type="text" id="Question4" name="title" required lay-verify="required"
                                    placeholder="请输入第四题" autocomplete="off" class="layui-input">
                            </td>
                        <tr>
                            <td>
                                <label for="">填写范围：</label>
                                <input type="text" id="Question4Box" name="title" required lay-verify="required"
                                    placeholder="请输入分数1~10" title="这只是个样式啦，点不了的" autocomplete="off"
                                    class="layui-input layui-disabled">
                            </td>
                        </tr>
                        </tr>
                        <!-- 第五题 -->
                        <tr>
                            <td>
                                <h4><strong>第五题：</strong></h4>
                                <input type="text" id="Question5" name="title" required lay-verify="required"
                                    placeholder="请输入第五题" autocomplete="off" class="layui-input">
                            </td>
                        <tr>
                            <td>
                                <label for="">填写范围：</label>
                                <input type="text" id="Question5Box" name="title" required lay-verify="required"
                                    placeholder="请输入分数1~10" title="这只是个样式啦，点不了的" autocomplete="off"
                                    class="layui-input layui-disabled">
                            </td>
                        </tr>
                        </tr>
                        <!-- 第六题 -->
                        <tr>
                            <td>
                                <h4><strong>第六题：</strong></h4>
                                <input type="text" id="Question6" name="title" required lay-verify="required"
                                    placeholder="请输入第六题" autocomplete="off" class="layui-input">
                            </td>
                        <tr>
                            <td>
                                <label for="">填写范围：</label>
                                <input type="text" id="Question6Box" name="title" required lay-verify="required"
                                    placeholder="请输入分数1~10" title="这只是个样式啦，点不了的" autocomplete="off"
                                    class="layui-input layui-disabled">
                            </td>
                        </tr>
                        </tr>
                        <!-- 第七题 -->
                        <tr>
                            <td>
                                <h4><strong>第七题：</strong></h4>
                                <input type="text" id="Question7" name="title" required lay-verify="required"
                                    placeholder="请输入第七题" autocomplete="off" class="layui-input">
                            </td>
                        <tr>
                            <td>
                                <label for="">填写范围：</label>
                                <input type="text" id="Question7Box" name="title" required lay-verify="required"
                                    placeholder="请输入分数1~10" title="这只是个样式啦，点不了的" autocomplete="off"
                                    class="layui-input layui-disabled">
                            </td>
                        </tr>
                        </tr>
                        <!-- 第八题 -->
                        <tr>
                            <td>
                                <h4><strong>第八题：</strong></h4>
                                <input type="text" id="Question8" name="title" required lay-verify="required"
                                    placeholder="请输入第八题" autocomplete="off" class="layui-input">
                            </td>
                        <tr>
                            <td>
                                <label for="">填写范围：</label>
                                <input type="text" id="Question8Box" name="title" required lay-verify="required"
                                    placeholder="请输入分数1~10" title="这只是个样式啦，点不了的" autocomplete="off"
                                    class="layui-input layui-disabled">
                            </td>
                        </tr>
                        </tr>
                        <!-- 第九题 -->
                        <tr>
                            <td>
                                <h4><strong>第九题：</strong></h4>
                                <input type="text" id="Question9" name="title" required lay-verify="required"
                                    placeholder="请输入第九题" autocomplete="off" class="layui-input">
                            </td>
                        <tr>
                            <td>
                                <label for="">填写范围：</label>
                                <input type="text" id="Question9Box" name="title" required lay-verify="required"
                                    placeholder="请输入分数1~10" title="这只是个样式啦，点不了的" autocomplete="off"
                                    class="layui-input layui-disabled">
                            </td>
                        </tr>
                        </tr>
                        <!-- 第十题 -->
                        <tr>
                            <td>
                                <h4><strong>第十题：</strong></h4>
                                <input type="text" id="Question10" name="title" required lay-verify="required"
                                    placeholder="请输入第十题" autocomplete="off" class="layui-input">
                            </td>
                        <tr>
                            <td>
                                <label for="">填写范围：</label>
                                <input type="text" id="Question10Box" name="title" required lay-verify="required"
                                    placeholder="请输入分数1~10" title="这只是个样式啦，点不了的" autocomplete="off"
                                    class="layui-input layui-disabled">
                            </td>
                        </tr>
                        </tr>


                    </table>






                </form>

            </div>

            <!-- 右布局 -->
            <div class="col">
                <div class="card" style="width: 18rem;">
                    <img src="/statics/img/userHeadPortrait.jpg" class="card-img-top" alt="">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item" id="introductionColumn">用户：{{username}}</li>
                        <li class="list-group-item" id="introductionColumn">
                            问卷号： <label for="" id="qsId">？</label></li>
                    </ul>
                    <div class="card-body">

                        <!-- 个人信息 -->
                        <a href="#" class="card-link btn btn-info" style="margin: 1rem;" onclick="cancel()"> 取消发布</a>
                        <a href="#" class="card-link btn btn-info" style="margin: 1rem;" onclick="submitForm()"> 发布</a>
                        <label for="" class="errorSubmitForm invisible"
                            style="color: red;"><strong>未完成所有题目，请检查后再提交</strong></label>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>



    <script src="/statics/js/jquery-3.6.0.min.js"></script>
    <!-- axios -->
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>

    <script src="/statics/js/bootstrap.min.js"></script>
    <script src="../layui/layui.js"></script>
    <script>
        layui.use(['layer', 'form'], function () {
            var layer = layui.layer
                , form = layui.form;
        });
    </script>


    <!-- 取消发布按钮 -->
    <script>
        function cancel() {
            layer.confirm('确定取消发布填写？', {
                btn: ['确定', '取消'] //可以无限个按钮
                , btn2: function (index, layero) {
                    //按钮【按钮二】的回调
                }
            }, function (index, layero) {
                window.location.href = '/home';
            });
        }
    </script>

    <!-- 表单提交按钮点击事件 -->
    <script>

        function submitForm() {

            var qsId = $("#qsId").html();
            //第一题判断
            var Question1Box = $("#Question1").val();
            // var Question1Answer = $("input[name='Question1']:checked").val();
            // console.log(Question1Box);
            // console.log(Question1Answer);
            if (Question1Box === "") {
                //第一题未选择
                fn_errorSubmitForm("第一题未写完整");
            } else {
                //第二题判断
                var Question2Box = $("#Question2").val();
                // var Question2Answer = $("input[name='Question2']:checked").val();
                if (Question2Box === "") {
                    //第二题未选择
                    fn_errorSubmitForm("第二题未写完整");
                } else {
                    //第三题判断
                    var Question3Box = $("#Question3").val();
                    // var Question3Answer = $("input[name='Question3']:checked").val();
                    if (Question3Box === "") {
                        //第三题未选择
                        fn_errorSubmitForm("第三题未写完整");
                    } else {
                        //第四题判断
                        var Question4Box = $("#Question4").val();
                        // var Question4Answer = $("input[name='Question4']:checked").val();
                        if (Question4Box === "") {
                            //第四题未选择
                            fn_errorSubmitForm("第四题未写完整");
                        } else {
                            //第五题判断
                            var Question5Box = $("#Question5").val();
                            // var Question5Answer = $("input[name='Question5']:checked").val();
                            if (Question5Box === "") {
                                //第一题未选择
                                fn_errorSubmitForm("第五题未写完整");
                            } else {
                                //第六题判断
                                var Question6Box = $("#Question6").val();
                                // var Question6Answer = $("input[name='Question6']:checked").val();
                                if (Question6Box === "") {
                                    //第一题未选择
                                    fn_errorSubmitForm("第六题未写完整");
                                } else {
                                    //第七题判断
                                    var Question7Box = $("#Question7").val();
                                    // var Question7Answer = $("input[name='Question7']:checked").val();
                                    if (Question7Box === "") {
                                        //第七题未选择
                                        fn_errorSubmitForm("第七题未写完整");
                                    } else {
                                        //第八题判断
                                        var Question8Box = $("#Question8").val();
                                        // console.log(Question8Box);
                                        // var Question8Answer = $("input[name='Question8']:checked").val();
                                        if (Question8Box === "") {
                                            //第八题未选择
                                            fn_errorSubmitForm("第八题未写完整");
                                        } else {
                                            //第九题判断
                                            var Question9Box = $("#Question9").val();
                                            // var Question9Answer = $("input[name='Question9']:checked").val();
                                            if (Question9Box === "") {
                                                //第九题未选择
                                                fn_errorSubmitForm("第九题未写完整");
                                            } else {
                                                //第十题判断
                                                var Question10Box = $("#Question10").val();
                                                // var Question10Answer = $("input[name='Question10']:checked").val();
                                                if (Question10Box === "") {
                                                    //第十题未选择
                                                    fn_errorSubmitForm("第十题未写完整");
                                                } else {
                                                    var QSTheme = $("#QSTheme").val();
                                                    if (QSTheme === "") {
                                                        fn_errorSubmitForm("调查问卷主题未填写");
                                                    } else {
                                                        var qsSynopsis = $("#qsSynopsis").val();
                                                        if (qsSynopsis === "") {
                                                            fn_errorSubmitForm("调查问卷简介未填写");
                                                        } else {
                                                            axios({
                                                                method: 'post',
                                                                url: '/home/publishQSJudge',
                                                                data: {
                                                                    // 发表调查问卷人
                                                                    // 后端使用session查询

                                                                    // 调查问卷名
                                                                    QSTheme,
                                                                    // 调查问卷简介
                                                                    qsSynopsis,
                                                                    //  题目
                                                                    Question1Box,
                                                                    Question2Box,
                                                                    Question3Box,
                                                                    Question4Box,
                                                                    Question5Box,
                                                                    Question6Box,
                                                                    Question7Box,
                                                                    Question8Box,
                                                                    Question9Box,
                                                                    Question10Box,

                                                                }
                                                            }).then(function (response) {
                                                                var res = response.data;
                                                                if (res.code === 200) {
                                                                    window.location.href = '/home/publishQSOk';
                                                                }

                                                            })
                                                            // 提交表单
                                                            // $("#QuestionForm").submit(); 
                                                        }
                                                    }


                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }

        }
    </script>
    <script>
        // 用户名下面的错误提示函数
        function fn_errorSubmitForm(errorHint) {
            $('.errorSubmitForm').text(errorHint);
            $('.errorSubmitForm').removeClass('invisible');
            setTimeout(() => {
                $('.errorSubmitForm').addClass('invisible');
            }, 5000);
        }
    </script>

</body>


</html>